<template>
  <div class="user">
    <button @click="changeUser">ChangeUser</button>
    <li>
      {{ this.$store.getters.userName }}
    </li>
    <li>
      {{ this.$store.getters.userId }}
    </li>
    <li>
      {{ this.$store.getters.userGender }}
    </li>
    <li>
      {{ this.$store.getters.userAge }}
    </li>
    <br />
    <div>
      <input type="text" :value="queryName" name="" id="" />
      <button type="submit" name="" @click="queryUser(queryName)">Query</button>
      <br />
      <table>
        <thead></thead>
        <tbody>
          <tr>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return { queryName: "李含敏" };
  },
  computed: {},
  methods: {
    changeUser() {
      // this.$store.commit("switchUser");
      this.$store.dispatch("updateName", "我是XXX");
    },
    queryUser(queryName) {
      console.log("queryuser:" + queryName);
      // this.$store.commit("queryUserInfo", queryName);
    },
  },
};
</script>
